<template>
    <div class="set-store">
        <el-row :gutter="20" class="rows">
            
            <!-- 资料信息 -->
            <el-col :span="12">
                <el-form class="form" ref="form" :model="form" label-width="80px" label-position='left' style="padding-bottom: 120px">
                    <!-- 帐号信息 -->
                    <div class="module-title">帐号信息<a href="javascript:;">
                        <!-- <i class="el-icon-setting"></i>修改 -->
                        </a></div>
                    <el-row class="rows">
                        <el-col :span="6">
                            
                            <div class="images">
                                <img :src="showImg + img1" class="imgshow" v-if="img1 != ''" />
                                <img src="./../../public/img/add.png" class="addimg" v-if="img1 == ''">
                                <p v-if="img1 == ''">添加证照</p>
                                <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img1')" >
							</div>
                            <p class="text-center">身份证(正面)</p>
                        </el-col>
                        <el-col :span="6">
                            <div class="images">
                                <img :src="showImg + img2" class="imgshow" v-if="img2 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img2 == ''">
                                <p v-if="img2 == ''">添加证照</p>
                                <input type="file" name="" class="avatar-uploader" @change="fileChange($event,'img2')">
							</div>
                            <p class="text-center">身份证(反面)</p>
                        </el-col>
                        <el-col :span="6">
                            <div class="images">
                                <img :src="showImg + img3" class="imgshow"  v-if="img3 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg"  v-if="img3 == ''">
                                <p v-if="img3 == ''">添加证照</p>
                                <input type="file" name="" class="avatar-uploader" @change="fileChange($event, 'img3')">
							</div>
                            <p class="text-center">营业执照</p>
                        </el-col>
                        <el-col :span="6">
                            <div class="images">
                                <img :src="showImg + img4" class="imgshow" v-if="img4 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img4 == ''">
                                <p v-if="img4 == ''">添加证照</p>
                                <input type="file" name="" class="avatar-uploader" @change="fileChange($event,'img4')">
							</div>
                            <p class="text-center">特种行业经营资质</p>
                        </el-col>
                    </el-row>
                    <p class="tips">注：身份证有国徽的一面是正面,有头像的一面是反面</p>
                    <el-row class="rows">
                        <el-col :span="6">
                            <div class="images">
                                <img :src="showImg + img5" class="imgshow" v-if="img5 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img5 == ''">
                                <p v-if="img5 == ''">添加证照</p>
                                <input type="file" name="" class="avatar-uploader" @change="fileChange($event,'img5')">
							</div>
                            <p class="text-center">门头照</p>
                        </el-col>
                        <el-col :span="6">
                            <div class="images">
                                <img :src="showImg + img6" class="imgshow" v-if="img6 != ''" />
                                <img src="./../../public/img/add.png" class="addimg" v-if="img6 == ''">
                                <p v-if="img6 == ''">添加证照</p>
                                <input type="file" name="" class="avatar-uploader" @change="fileChange($event,'img6')">
							</div>
                            <p class="text-center">内景照_1</p>
                        </el-col>
                        <el-col :span="6">
                           <div class="images">
                                <img :src="showImg + img7" class="imgshow" v-if="img7 != ''" />
                                <img src="./../../public/img/add.png" class="addimg" v-if="img7 == ''">
                                <p v-if="img7 == ''">添加证照</p>
                                <input type="file" name="" class="avatar-uploader" @change="fileChange($event,'img7')">
							</div>
                            <p class="text-center">内景照_2</p>
                        </el-col>
                        <el-col :span="6">
                            <div class="images">
                                <img :src="showImg + img8" class="imgshow" v-if="img8 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img8 == ''">
                                <p v-if="img8 == ''">添加证照</p>
                                <input type="file" name="" class="avatar-uploader" @change="fileChange($event,'img8')">
							</div>
                            <p class="text-center">内景照_3</p>
                        </el-col>
                    </el-row>
                    <el-row class='rows text-right change-btn'>
                        <el-button size="small">取消</el-button>
                        <el-button type="primary" size="small" v-on:click="surecommit">确认</el-button>
                    </el-row>
                </el-form>
            </el-col>
        </el-row>
        <!-- 结算信息 
        <el-row :gutter="20" class="rows">
            <el-col :span="24">
                <el-form class="form" ref="form" :model="settlement" label-width="80px" label-position='left'>
                    
                    <div class="module-title">结算信息<a href="javascript:;"><i class="el-icon-setting"></i>修改</a></div>
                    <el-form-item label="账户类型" size="small" class="el-form-item">
                        <el-select v-model="settlement.bankType" style="width: 30%" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开户名称" size="small" class="el-form-item">
                        <el-input v-model="settlement.name"></el-input>
                    </el-form-item>
                    <el-form-item label="开户银行" size="small" class="el-form-item">
                        <el-select v-model="settlement.bank" style="width: 30%" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开户城市" size="small" class="el-form-item">
                        <el-select v-model="settlement.city" style="width: 175px" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                        <el-select v-model="settlement.city" style="width: 175px" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                        <el-select v-model="settlement.city" style="width: 175px" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开户支行" size="small" class="el-form-item">
                        <el-input v-model="settlement.branch"></el-input>
                    </el-form-item>
                    <el-form-item label="银行帐号" size="small" class="el-form-item">
                        <el-input v-model="settlement.account"></el-input>
                    </el-form-item>
                    <el-form-item size="small" class="el-form-item text-right">
                        <el-button>取消</el-button>
                        <el-button type="primary">确认</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>-->
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
export default {
  mounted () {
    let that = this;
    // 获取商户详情
    that.getDetail();
  },
  methods: {
    handleAvatarSuccess: function (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    fileChange (event, img) {
      var file = event.target.files;
      http.upImg(api.upimg, {
        file: file[0]
      }, response => {
        this[img] = response.data[0].file_code;
        console.log(this);
      }, err => {
        console.log(err);
      });
    },
    getDetail () {
      let that = this;
      http.get(api.storeInfo, {
        token: localStorage.getItem('token'),
        store_code: that.$route.query.store_code,
        type: 2
      }, response => {
        if (response.code === '10001' && response.status === 'SUCCESS') {
          that.info = response.data[0];
          console.log(that.getValue(that.info.id_card_front));
          that.img1 = that.getValue(that.info.id_card_front);
          that.img2 = that.getValue(that.info.id_card_verso);
          that.img3 = that.getValue(that.info.store_license);
          that.img4 = that.getValue(that.info.store_special_proof);
          that.img5 = that.getValue(that.info.store_door);
          that.img6 = that.getValue(that.info.store_pic1);
          that.img7 = that.getValue(that.info.store_pic2);
          that.img8 = that.getValue(that.info.store_pic3);
        } else {
          that.$message.error(response.msg);
        }
      }, fail => {
        console.log(fail);
        that.$message.error('网络错误，请稍候再试');
      });
    },
    // 获取url最后一个/的位置
    getValue (url) {
      if (url) {
        // 获取最后一个/的位置
        var site = url.lastIndexOf('/');
        // 截取最后一个/后的值
        url = url.substring(site + 1, url.length);
      }

      return url;
    },
    surecommit: function () {
      var that = this;
      if (!that.makesure) {
        return false;
      }
      if (that.img1 === '') {
        alert('身份证正面照不能为空');
        return false;
      } else if (that.img2 === '') {
        alert('身份证反面照不能为空');
        return false;
      } else if (that.img3 === '') {
        alert('营业执照不能为空');
        return false;
      } else if (that.img4 === '') {
        alert('特种行业经营资质照不能为空');
        return false;
      } else if (that.img5 === '') {
        alert('门头照不能为空');
        return false;
      } else if (that.img6 === '') {
        alert('内景照_1不能为空');
        return false;
      } else if (that.img7 === '') {
        alert('内景照_2不能为空');
        return false;
      } else if (that.img8 === '') {
        alert('内景照_3不能为空');
        return false;
      }
      that.makesure = false;
      // 添加店铺扩张信息接口
      http.post(api.extrasave, {
        token: that.token,
        store_code: that.$route.query.store_code,
        id_card_front: that.showImg + that.img1,
        id_card_verso: that.showImg + that.img2,
        store_license: that.showImg + that.img3,
        store_special_proof: that.showImg + that.img4,
        store_door: that.showImg + that.img5,
        store_pic1: that.showImg + that.img6,
        store_pic2: that.showImg + that.img7,
        store_pic3: that.showImg + that.img8
      }, (res) => {
        console.log(res);
        console.log(that.img6);
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.$message.success(res.msg);
          that.getDetail();
          setTimeout(function () {
            that.makesure = true;
          }, 3000);
        } else {
          that.$message.error(res.msg);
          that.makesure = true;
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
        that.makesure = true;
        console.log(11);
      });
      return true;
    }
  },
  data () {
    return {
      token: localStorage.getItem('token'),
      // 防爆点击, 点击之后三秒才能点击
      makesure: true,
      info: {},
      form: {
        name: '',
        account: '',
        passsword: '',
        surePassword: '',
        storeName: '',
        storeType: '',
        charge: '',
        phone: '',
        email: '',
        promoters: ''
      },
      settlement: {
        name: '',
        bank: '',
        city: '',
        branch: '',
        bankType: '',
        account: ''
      },
      baseUrl: api.baseUrl + api.upimg,
      imageUrl: '',
      img1: '',
      img2: '',
      img3: '',
      img4: '',
      img5: '',
      img6: '',
      img7: '',
      img8: '',
      showImg: api.baseUrl + api.showImg
    };
  }
};
</script>

<style lang="stylus" scoped>
.set-store
  .rows
    margin-top: 10px
    .form
      padding: 20px
      box-sizing: border-box
      background: #fff
      .module-title
        border-left: 5px solid #36ADCB
        padding-left: 5px
        box-sizing: border-box
        font-size: 16px
        color: #999
        a
          color: #333
          font-size: 14px
          float: right
      .el-form-item
        margin-top: 15px
      .images
        position: relative
        border: 1px solid #ABABAB
        height: 160px
        width: 120px
        margin: 0 auto 15px
        text-align: center
        .addimg
          margin: 50px auto 15px
          display: inline-block
          width: 30px
          height: 30px
        .imgshow
          position: absolute
          top: 0
          left: 0
          width: 122px
          height: 162px
      .avatar-uploader
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        cursor: pointer
        overflow: hidden
        opacity:0
      .tips
        margin-top: 15px
        margin-bottom: 100px
        color: #666
        font-size: 12px
  .change-btn
    margin-top: 45px
</style>
